<template>
  <view class="detail-container">
    <view class="header">
      <text class="title">{{ detail.title || '展览详情' }}</text>
      <text class="sub">{{ detail.museum || detail.location }} · {{ detail.city || '' }} {{ detail.country || '' }} · {{ formatFullDate(detail.date) }}</text>
      <button class="edit-btn" @click="editExhibition">编辑展览</button>
    </view>

    <view class="meta">
      <view class="row"><text class="label">美术馆</text><text class="value">{{ detail.museum || '-' }}</text></view>
      <view class="row"><text class="label">AI总体解读</text><text class="value">{{ detail.aiSummary || '（待生成）' }}</text></view>
    </view>

    <!-- <view class="tab-bar">
      <button class="tab-btn" :class="{ active: activeTab === 'exhibit' }" @click="switchTab('exhibit')">展览照片</button>
      <button class="tab-btn" :class="{ active: activeTab === 'aigc' }" @click="switchTab('aigc')">AIGC</button>
    </view> -->

    <view class="masonry-container" v-if="activeTab==='exhibit'">
      <view v-if="isLoading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-else-if="exhibitImages.length === 0" class="empty-container">
        <text class="empty-text">暂无展览照片</text>
        <text class="empty-hint">稍后可接入后端返回该展览的素材</text>
      </view>
      <view v-else class="masonry-item" v-for="(img, index) in exhibitImages" :key="index">
        <image :src="img.imageUrl" mode="aspectFill"></image>
      </view>
    </view>

    <view class="masonry-container" v-else>
      <view v-if="isLoading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-else-if="aigcAssets.length === 0" class="empty-container">
        <text class="empty-text">暂无AIGC作品</text>
        <text class="empty-hint">可包含风格化图片与视频</text>
      </view>
      <view v-else class="masonry-item" v-for="(asset, index) in aigcAssets" :key="index">
        <template v-if="asset.type==='image'">
          <image :src="asset.imageUrl" mode="aspectFill"></image>
        </template>
        <template v-else>
          <view class="video-container" @click="playVideo(asset.videoUrl)">
            <image :src="asset.coverUrl || '/static/test.png'" class="video-cover" mode="aspectFill" />
            <view class="play-overlay"><text class="play-icon">▶</text></view>
          </view>
        </template>
      </view>
    </view>

    <!-- 底部上传图片按钮 -->
    <view class="bottom-upload">
      <button class="upload-bottom-btn" @click="uploadMoreImages">添加图片</button>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { uploadSingleImage, getRecordDetail } from '@/services/api/backendApi'

const detail = reactive({})
const activeTab = ref('exhibit')
const isLoading = ref(false)
// 展览原始照片
const exhibitImages = ref([
  { imageUrl: '/static/p1.jpg' },
  { imageUrl: '/static/c2.png' },
  { imageUrl: '/static/c3.png' },
  { imageUrl: '/static/c4.png' }
])

// AIGC 作品（图片 + 视频）
const aigcAssets = ref([
  { type: 'image', imageUrl: '/static/c5.png' },
  { type: 'image', imageUrl: '/static/c6.png' },
  { type: 'video', videoUrl: 'https://douyin-ai.tos-cn-shanghai.volces.com/e150904a-8d12-4098-a713-bdf45316342a.mp4', coverUrl: '/static/test.png' },
  { type: 'image', imageUrl: '/static/c7.png' },
  { type: 'image', imageUrl: '/static/c8.png' }
])

function formatFullDate(dateStr) {
  if (!dateStr) return ''
  const d = new Date(dateStr)
  const y = d.getFullYear()
  const m = `${d.getMonth() + 1}`.padStart(2, '0')
  const day = `${d.getDate()}`.padStart(2, '0')
  return `${y}-${m}-${day}`
}

onLoad((query) => {
  try {
    if (query && query.data) {
      const parsed = JSON.parse(decodeURIComponent(query.data))
      Object.assign(detail, parsed)
    }
  } catch (e) {
    console.error('解析参数失败', e)
  }
})

function switchTab(tab) {
  activeTab.value = tab
  // TODO: 等后端提供接口：根据 detail.id & tab 拉取图片/视频
}

function playVideo(url) {
  if (!url) return
  uni.navigateTo({ url: `/pages/video-player/video-player?videoUrl=${encodeURIComponent(url)}` })
}

function editExhibition() {
  const payload = encodeURIComponent(JSON.stringify(detail))
  uni.navigateTo({ url: `/pages/footprint/edit?data=${payload}` })
}

// 底部上传图片（调用统一上传接口）
function uploadMoreImages() {
  uni.chooseImage({
    count: 9,
    success: async (res) => {
      try {
        const temp = res.tempFilePaths || []
        const recId = detail.recordId || detail.id || ''
        for (let i = 0; i < temp.length; i++) {
          await uploadSingleImage(temp[i], 2, recId)
        }
        uni.showToast({ title: '上传成功', icon: 'success' })
        // 尝试刷新展览图片
        if (recId) {
          try {
            const d = await getRecordDetail(recId)
            const data = d.data || d
            const list = data.imageList || []
            // 同步到展览照片tab
            exhibitImages.value = list.map(img => ({ imageUrl: img.imageUrl || img.url }))
          } catch (e) {
            // 忽略刷新错误
          }
        }
      } catch (e) {
        console.error('上传失败', e)
        uni.showToast({ title: '上传失败', icon: 'none' })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.detail-container {
  min-height: 100vh;
  background: #1a1a1a;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  
  .title {
    display: block;
    font-size: 24px;
    color: #ffffff;
    font-weight: 700;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  }
  .sub {
    display: block;
    margin-top: 6px;
    color: #cccccc;
    font-size: 13px;
  }
  
  .edit-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: #0FFDCD;
    color: #0c0c0c;
    border: none;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
  }
}

.meta { background: transparent; border-radius: 14px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.12); margin-bottom: 12px; }
.row { 
  display:flex;
  justify-content: space-between;
  padding:6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12); 
}
.row:last-child { 
  border-bottom: none; 
}
.label { 
  color:#cccccc;
  font-size:12px; 
}
.value { 
  color:#ffffff;
  font-size:14px;
  font-family:'PingFang SC', 'Microsoft YaHei', sans-serif; 
}

.tabs { display:flex; background: rgba(255,255,255,0.08); border-radius: 22px; padding:4px; margin-bottom: 12px; }
.tab { 
  flex:1;
  text-align:center;
  padding:10px 0;
  color:#ffffff;
  border-radius: 18px;
  font-family:'PingFang SC', 'Microsoft YaHei', sans-serif; 
}
.tab.active { 
  background: rgba(255,255,255,0.16);
  color:#ffffff;
  font-weight:600;
  box-shadow: none; 
}

.section {
  margin-bottom: 16px;
}

.tab-bar { display: flex; width: 60%; margin: 0 auto 14px; justify-content: space-between; background: rgba(255,255,255,0.08); border-radius: 25px; padding: 4px; backdrop-filter: blur(10px); }
.tab-btn {
  width: 48%;
  background: none;
  border: none;
  padding: 12px 0;
  font-size: 15px;
  color: #ffffff;
  position: relative;
  border-radius: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: 300;
  outline: none;
  /* 解决小程序 button 默认伪元素遮挡点击 */
  &::after { border: none; }
}
.tab-btn.active { 
  color:#ffffff;
  background: rgba(255,255,255,0.16);
  font-weight: 400;
  box-shadow: none; 
}

.masonry-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.loading-container { width: 100%; height: 200px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.06); border-radius: 15px; backdrop-filter: blur(10px); }
.loading-text { 
  color:#ffffff;
  font-size:16px;
  font-family:'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight:300; 
}
.empty-container { width:100%; height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center; background: rgba(255,255,255,0.06); border-radius:15px; backdrop-filter: blur(10px); }
.empty-text { 
  color:#ffffff;
  font-size:18px;
  font-family:'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight:300;
  margin-bottom:8px; 
}
.empty-hint { 
  color:#aaaaaa;
  font-size:14px;
  font-family:'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight:200; 
}
.masonry-item { 
  border-radius:15px;
  overflow:hidden;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:3/4;
  box-shadow: none;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease; 
}
.masonry-item image { 
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(1.1) contrast(1.05);
  border-radius: 15px; 
}
.video-container { 
  position:relative;
  width:100%;
  height:100%;
  border-radius:15px;
  overflow:hidden;
  cursor:pointer; 
}
.video-cover { 
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:15px; 
}
.play-overlay { 
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:60px;
  height:60px;
  background: rgba(0, 0, 0, 0.6);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(4px); 
}
.play-icon { 
  color:#fff;
  font-size:24px;
  font-weight:bold; 
}
.section-title {
  color: #ffffff;
  font-weight: 600;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  margin-bottom: 8px;
}
.card { background: transparent; border-radius: 14px; padding: 14px 16px; box-shadow: none; }
.desc {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.6;
}

.bottom-upload { margin-top: 16px; }
.upload-bottom-btn {
  width: 100%;
  background: #0FFDCD;
  color: #0c0c0c;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  &::after { border: none; }
}
</style>

